import React, { Component } from 'react';
import './all.scss'
import { good_list } from '../../utils/api'
import { Input } from 'antd'
import { Skeleton } from 'antd-mobile'
import { LeftOutlined, SearchOutlined, FilterOutlined, UpOutlined, DownOutlined } from '@ant-design/icons'
class All extends Component {
    constructor(props) {
        super(props);
        this.state = {
            arr: [
                { title: '综合', icon: '' },
                { title: '销量', icon: '' },
                { title: '新品', icon: '' },
                { title: '价格', icon: <UpOutlined />, icon1: <DownOutlined /> },
                { title: '筛选', icon: <FilterOutlined /> },
            ],
            goods: [],
            i: 0
        }
    }

    componentDidMount() {
        if (this.props.location.state) {
            good_list({ id: this.props.location.state.newid }).then((res) => {
                console.log(res.data.list)
                this.setState({
                    goods: res.data.list
                })
            })
        } else {
            good_list({ id: 282657 }).then((res) => {
                this.setState({
                    goods: res.data.list
                })
            })
        }
    }
    back = () => {
        this.props.history.go(-1)
    }
    render() {
        return (
            <div>
                <div className="all1">
                    <div className="title_r">
                        <LeftOutlined onClick={this.back} />
                        <h1>全部商品</h1>
                        <span>......</span>
                    </div>
                    <div className="head1">
                        <Input type="text" className='cateinput' placeholder='搜索店铺内商品' prefix={<SearchOutlined></SearchOutlined>} />
                        <div className="title_s">
                            {
                                this.state.arr.map((item, index) => {
                                    return <div className={"syn " + (this.state.i == index ? 'syn1' : '')} key={index} onClick={() => this.handclick(index)}>
                                        {item.title}{item.icon}{item.icon1}
                                    </div>
                                })
                            }
                        </div>
                    </div>
                </div>
                {
                    this.state.goods.length == 0 ?
                        <>
                            <Skeleton.Title animated />
                            <Skeleton.Paragraph lineCount={5} animated />
                        </> : <div className="goods_all">
                            {
                                this.state.arr &&
                                this.state.goods.map((item, index) => {
                                    return <div className="allgood" key={index} onClick={() => this.goodclick(item.id)}>
                                        <img src={item.pic} alt="" />
                                        <p className='name'>{item.name}</p>
                                        <div className="price_all">
                                            <p>{item.salesPrice.name}￥<span>{item.salesPrice.value}</span></p>
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                }
            </div>
        );
    }

    handclick(index) {
        this.setState({
            i: index
        })
    }
    goodclick(id) {
        this.props.history.push({ pathname: '/goods', state: { goodid: id } })
    }
}

export default All;